
<template>
  <div>
  <div class="collection-text">
    <p style="margin-top: 52px">{{selectDictLabel(dict.type.collection_material,material)}}·{{name}}</p>
    <p>「 年代·{{selectDictLabel(dict.type.collection_year,years)}} 」</p>
  </div>
  <div class="collection-music">
    <audio controls ref="audio" class="aud">
      <source :src="file3dMp3" />
      <!-- <source src="./ziteng.mp3" /> -->
    </audio>
  </div>
  <div class="arrow_left" @click="handlePrevious" v-if="num == 0 || num == 1">
    <svg-icon class="navigate_svg" icon-class="left" />
  </div>
  <div class="arrow_right" @click="handleNext" v-if="num == 1 || num == 2">
    <svg-icon class="navigate_svg" icon-class="right" />
  </div>
  <div id="three-canvas"></div>
  </div>

</template>
<script>
import {get3dInfo, getInfoapi, listAfxCollectionByYearsAnd} from "@/api/afxmanage/material"
import {AmbientLight, Color, PerspectiveCamera, Scene,MeshBasicMaterial, TextureLoader,Mesh,ImageUtils,cancelAnimationFrame,Vector3, WebGLRenderer} from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";
import {MTLLoader} from "three/examples/jsm/loaders/MTLLoader.js";
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader.js";
import {selectDictLabel} from "../../../utils/ruoyi";
import { number } from "echarts";
import  JSZip from 'jszip';
const baseURL = process.env.VUE_APP_BASE_API;
export default {
  dicts: ['collection_category', 'collection_level', 'collection_material', 'collection_source', 'collection_year', 'collection_characteristics', 'is_in_stock', 'collection_status'],
  name: "index",
  data() {
    return {
      baseURL:"http://192.168.100.115:28888/prod-api/",
      //baseURL:"http://localhost:25512",
      camera: null,  //相机对象
      scene: null,  //场景对象
      renderer: null,  //渲染器对象
      mesh: null,  //网格模型对象Mesh
      file3dObj:null,//3d文件
      file3dJpg:null,//3D贴图
      file3dTion:null,//3D贴图
      name:"",
      years:"",
      material:"",
      file3dMp3:"",
      num:0,
      list:[],
      infoList:[],
    }
  },
  created() {
    this.get3dInfo()
  },
  mounted() {
    this.init()
    this.$nextTick(() => {
      this.createModel('7b6ab617-5ec9-4cef-a1e2-55582e501a10')
    })

    // let music1 = new Audio();
    //   music1 = require("./ziteng.mp3");
    //   this.$refs.audio.src = music1;
      this.$refs.audio.play();
  },
  methods: {
    selectDictLabel,
    get3dInfo() {
        get3dInfo().then(res => {
          this.infoList = res
          res.forEach(e => {
            this.list.push(e.id)
          });
          console.log('看看',this.infoList[this.num].name);

      })
      .catch(err => {
        console.log(err);
      })
    },
    createModel(data){
      let tht = this

      const onProgress = function (xhr) {
        if(xhr.lengthComputable){
          const percentComplete = xhr.loaded / xhr.total * 100
          console.log( Math.round( percentComplete, 2 ) + '% downloaded' )
        }
      }
      // let id =this.$route.query.id ;
      let id = data;
      getInfoapi({id:id}).then(async response => {
        tht.file3dObj = response.data.file3dObj;
        tht.file3dJpg = response.data.file3dJpg;
        tht.file3dTion = response.data.file3dTion;
        tht.file3dMp3 = tht.baseURL + response.data.file3dMp3;
        tht.name = response.data.name;
        tht.years = response.data.years;
        tht.material = response.data.material;
        console.log(tht.baseURL)
        console.log(tht.file3dJpg)
        console.log(tht.file3dObj)
        const zip = new JSZip();
        const responsezip = await fetch(tht.baseURL + tht.file3dObj.slice(0, -4) + ".zip");
        const arrayBuffer = await responsezip.arrayBuffer();
        await zip.loadAsync(arrayBuffer);
        const objEntry = zip.file(/.*\.obj$/i)[0];
        const objContent = await objEntry.async("text"); // 获取 OBJ 文件内容。
        let materials= new MTLLoader().parse(objContent);
          console.log("MTLLoader", materials)
          materials.preload()
        let obj= new OBJLoader().parse(objContent);
            obj.position.set(0, 0, 0)
            obj.scale.set(tht.file3dTion, tht.file3dTion, tht.file3dTion)
            const texture = new TextureLoader().load(tht.baseURL + tht.file3dJpg);

              obj.traverse(function (child) {
                if (child instanceof Mesh) {
                  //设置模型皮肤
                  child.material = new MeshBasicMaterial({
                    map: texture
                  });
                }
              });
            tht.scene.add(obj)
          }, onProgress)



      this.$modal.closeLoading();
    },
    init(){
      this.$modal.loading("加载中，请稍候...");
      let container = document.getElementById('three-canvas')
      this.renderer = new WebGLRenderer({
        //开启抗锯齿
        antialias: true
      })
      //将渲染器挂载到dom
      container.appendChild(this.renderer.domElement)
      this.renderer.setSize(container.offsetWidth, container.offsetHeight, true)
      //实例化场景
      this.scene = new Scene()
      this.scene.background = new Color('#2f3031')
      // this.renderer.setClearColor('#8e8a8bd4', 0.4);
      //实例化相机
      this.camera = new PerspectiveCamera(45,container.offsetWidth / container.offsetHeight, 1, 1000)
      //设置相机位置
      this.camera.position.set(50,50,50)
      //设置相机看先中心点
      this.camera.lookAt(new Vector3(0,0,0))
      //设置相机自身方向
      this.camera.up = new Vector3(0,1,0)
          //初始化轨道控制器
          /*let orbitControls = new OrbitControls(this.camera,this.renderer.domElement)
          //设置鼠标功能键
          orbitControls.mouseButtons = {
              //左键无功能
              LEFT: null,
              //中键缩放
              MIDDLE: MOUSE.DOLLY,
              //右键旋转
              RIGHT: MOUSE.ROTATE
          }*/
          // 添加轨道控制器
          let orbitControls = new OrbitControls(this.camera,this.renderer.domElement);
          // 设置带阻尼的惯性
          orbitControls.enableDamping = true;
          // 设置阻尼的系数
          orbitControls.dampingFactor = 0.05;
          // 设置自动旋转
          orbitControls.autoRotate = true;

          //添加环境光
          const ambientLight = new AmbientLight('rgb(227,223,223)', 1)
          // //半球光
          // const hemisphereLight = new HemisphereLight(0xE3DFDFFF, 0xE3DFDFFF, 1); // 天空光的颜色、地面光的颜色和强度
          // hemisphereLight.position.set(0, 100, 0); // 设置光源位置
          // this.scene.add(hemisphereLight);

          this.scene.add(ambientLight)
          let animate = () => {
              //跟新渲染页面
              orbitControls.update();
              this.renderer.render(this.scene,this.camera)
              requestAnimationFrame(animate)
          }
          animate()
        },
      handlePrevious() {
        console.log("pre >>>> ");
        this.num++
        this.refresh(this.list[this.num])
      },
      handleNext() {
        console.log("next >>>> ");
        // this.clearModel()
        this.num--
        this.refresh(this.list[this.num])
      },
      refresh(data){
        //1、清空旧的scene下的children
        this.clearModel()
        //2、重新初始化场景，加载新的模型场景
        this.init()
        this.$nextTick(() => {
          this.createModel(data)
        })
      },
      clearModel () {
        // if (this.scene !== null && this.scene.children.length > 3) {
          // this.scene.children.pop()
          // 必须要清空当前div下的canvas不然canvas会继续叠加
          const domDiv = document.getElementById('three-canvas')
          if (domDiv !== null && domDiv.firstChild) {
            domDiv.removeChild(domDiv.firstChild)
          }
          // ...重置相关data变量，例如camera，light...
          // this.renderer.forceContextLoss();
          // this.renderer.dispose();
          // this.scene.clear();
          // this.flows = [];
          // this.scene = null;
          // this.camera = null;
          // this.controls = null;
          // this.renderer.domElement = null;
          // this.renderer = null;
          // this.sceneDomElement = null;
        // }
      },
      clearScene() {
        // cancelAnimationFrame(this.animationId);
        this.scene.traverse((child) => {
          if (child.material) {
            child.material.dispose();
          }
          if (child.geometry) {
            child.geometry.dispose();
          }
          child = null;
        });
        this.renderer.forceContextLoss();
        this.renderer.dispose();
        this.scene.clear();
        this.flows = [];
        this.scene = null;
        this.camera = null;
        this.controls = null;
        this.renderer.domElement = null;
        this.renderer = null;
        this.sceneDomElement = null;
        console.log('clearScene');
      },

    }
}
</script>

<style scoped>
#three-canvas {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* background: linear-gradient(rgb(0, 0, 1), rgb(119, 119, 237)); */
}
.collection-text{
  position: absolute;
  top: 30px;
  left: 10vw;
  text-orientation: upright;
  writing-mode: vertical-rl;
  color: #fff;
  font-size: 24px;
  text-shadow: 2px 1px 3px #fff;
}
.collection-music {
  position: absolute;
  bottom: 30px;
  left: 40%;
}
.arrow_left {
  position: absolute;
  top: 39%;
  left: 6vw;
  font-size: 64px;
  color: #c6c4c5;
  cursor: pointer;
}
.arrow_right {
  position: absolute;
  top: 39%;
  right: 6vw;
  color: #c6c4c5;
  font-size: 64px;
  cursor: pointer;
}

</style>

